<?php

/**
 * @author shuang
 * @date 2016-11-4 9:24:58
 */
use yii\helpers\Url;
use yii\bootstrap\Html;
use common\components\MTools;
?>
<style>
    .mui-table-view-cell::after{left:0;}
</style>
<div class="mui-card">
    <ul class="mui-table-view">
        <li class="mui-table-view-divider"><?php echo $taskmodel->title; ?></li>
        <li class="mui-table-view-cell">皓币 <span class="mui-badge mui-badge-success"><?php echo $model->price; ?></span></li>
        <li class="mui-table-view-cell">所需截图 <span class="mui-badge"><?php echo $taskmodel->sample_figure_count; ?>张</span></li>
        <li class="mui-table-view-cell">限制时间 <span class="mui-badge">10分钟</span></li>
        <li class="mui-table-view-cell">
            任务简介:
            <div><?php echo $taskmodel->note; ?></div>
            <?php if ($taskmodel->vote_address): ?>
                <div><a href="<?php echo $taskmodel->vote_address; ?>" target="_blank">【点击任务链接】</a></div>
            <?php endif; ?>
        </li>
        <?php if ($taskmodel->publicode): ?>
            <li class="mui-table-view-cell"><?php echo $areaType["xuanshou_label"]; ?> <span class="mui-badge"><?php echo $taskmodel->publicode; ?></span></li>
        <?php endif; ?>
        <?php if ($taskmodel->areaname && $taskmodel->areaname != "全部"): ?>
            <li class="mui-table-view-cell">区域<span class="mui-badge"><?php echo $taskmodel->areaname; ?></span></li>
        <?php endif; ?>
        <?php if ($taskmodel->qrcode): ?>
            <li class="mui-table-view-cell mui-media">
                二维码
                <span class="mui-pull-right">
                    <?php echo Html::tag('img', '', ['src' => MTools::Qiniunow480($taskmodel->qrcode), 'class' => 'mui-media-object']); ?>
                </span>
            </li>
        <?php endif; ?>
    </ul>
    <div class="mui-card-content btn-operate">
        <button style="margin: 0px 10px 10px;" data-id="<?php echo $model->id; ?>" data-action="hide" data-tips="确定要隐藏任务吗？" type="button" class="mui-pull-left mui-btn mui-btn-danger mui-col-xs-5" >隐藏此任务</button>
        <button style="margin: 0px 10px 10px;" data-id="<?php echo $model->id; ?>" data-action="report" data-tips="确定要报告任务吗？" type="button" class="mui-pull-right mui-btn mui-btn-danger mui-col-xs-5" >报告任务过期</button>
        <?php echo $this->render("task_image", ["images" => $taskmodel->sample_figure]); ?>
        <div class='mui-table-view' id='upload_images'></div>
    </div>
    <form id="addForm" action="<?php echo Url::toRoute(["taskdetail", "id" => $model->id, "taskid" => $taskmodel->id]); ?>" method="post" enctype="multipart/form-data">
        <?php if ($taskmodel->is_offer_mobile): ?>
            <div class="mui-card-footer">
                <button type="button" class="mui-btn mui-btn-danger mui-col-xs-12"  id="img_upload">选择图片</button>
            </div>
            <div class="mui-card-footer">
                <input type="text" class="mui-input mui-col-xs-12" placeholder="请填写手机号" name='taskaccount'/>
            </div>
            <div class="mui-card-footer">
                <button type="button" class="mui-btn mui-btn-danger mui-col-xs-12" id='sub-task'>提交任务</button>
            </div>       
        <?php else: ?>
            <div class="mui-card-footer">
                <button type="button" class="mui-btn mui-btn-danger mui-col-xs-12"  id="img_upload_submit">上传图片并提交</button>
            </div>
        <?php endif; ?>
    </form>
</div>

<script>
    wx.config(<?php echo json_encode($jssdk_config) ?>);
//    $(function () {
//        //绑定上传图片事件
//        var countimg = 0;
//        var mediaId_arr = [];
//        $("#img_uploade").click(function () {
//            //打开手机相册
//            wx.chooseImage({
//                // 默认9
//                count:<?php echo $taskmodel->sample_figure_count; ?>,
//                // 可以指定是原图还是压缩图，默认二者都有
//                sizeType: ['original', 'compressed'],
//                // 可以指定来源是相册还是相机，默认二者都有
//                sourceType: ['album', 'camera'],
//                success: function (res) {
//                    // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
//                    if (res.localIds.length != <?php echo $taskmodel->sample_figure_count; ?>) {
//                        msg('对不起!图片上传数量不符需要<?php echo $taskmodel->sample_figure_count; ?>张');
//                        $(this).css('disabled', false);
//                        return false;
//                    }
//
//                    var mediaId = '';
//                    for (var i = 0; i <= res.localIds.length; i++) {
//                        if (typeof (res.localIds[i]) != "undefined") {
//                            $(".mui-slider-item").append("<img height='150px' width='100%' src='" + res.localIds[i] + "'/>");
//                            //  console.log(res.localIds[i]);
////                                     //上传图片
////                                       wx.uploadImage({
////                                            // 需要上传的图片的本地ID，由chooseImage接口获得 
////                                            localId: res.localIds[i].toString(),
////                                            // 默认为1，显示进度提示
////                                            isShowProgressTips: 1,
////                                            success: function (res) {
////                                                // 返回图片的服务器端ID
////                                                mediaId_arr[i] = res.serverId;
////                                                countimg++;
////                                            }
////                                       });
//                        }
//                    }
////                   
////                   //轮询图片是否已上传到微信服务器
////                   var iftime = setInterval(function(){
////                             if (countimg == <?php //echo $taskmodel->sample_figure_count;                                 ?>) {
    //已到微信服务器停止轮询
//                                       window.clearInterval(iftime);
//                                       //进行图片从微信服务器下载到服务器
//                                       $.ajax({
//                                                    type:'POST',
//                                                    //data还需要带上用户id 活动id
//                                                    data:{mediaId_arr:mediaId_arr},
//                                                    dataType:'json',
//                                                    url:"<?php //echo Url::toRoute(["uploadimg"]);                                 ?>",
//                                                    success:function(return_value){
//                                                          if (return_value.status == '1') {
//                                                                    $(".mui-slider-item").html('');
//                                                                    //限制了图片的显示高度
//                                                                    for(var i=0;i<=return_value.img.length;i++){
//                                                                            if (typeof(res.localIds[i]) != "undefined") { 
//                                                                                    $(".mui-slider-item").append("<img height='200px' src='/uploadimg/"+return_value.img[i]+"'/>");
//                                                                             }
//                                                                    }
//                                                                    //禁止再点击
//                                                                    $("#img_uploade").css('disabled',true);
//                                                                    $("#img_uploade").html('上传完成');
//                                                                    msg('上传完成!请等待审核');
//                                                          } else {
//                                                                    $(".mui-slider-item").html('<img src="../images/default.png">');
//                                                                    msg('上传失败!请重试');
//                                                          }
//
//                                                     },
//                                                     error:function(){
//                                                         $(".mui-slider-item").html('<img src="../images/default.png">');
////                                                         msg('上传失败!请重试');
////                                                     }
////                                                });
////                            }
////                   },500);
//
//                },
//                cancel: function () {
//                    //用户取消就还可以上传
//                    $(this).css('disabled', false);
//                }
//            });
//
//        });
//
//        function msg(content) {
//            layer.open({
//                content: content
//                , skin: 'msg'
//                , time: 2 //2秒后自动关闭
//            });
//        }
//    });
</script>
<?php $this->beginBlock('taskdetail') ?>
app.taskdetail({image_count:<?php echo $taskmodel->sample_figure_count; ?>,id:<?php echo $model->id; ?>});
<?php $this->endBlock() ?>  
<?php $this->registerJs($this->blocks['taskdetail'], \yii\web\View::POS_END); ?>